<template>
  <div class="toolbar">
    <div
      class="toolbar-button"
      v-for="item of config"
      :class="{
        active:
          typeof item.active == 'boolean' && !item.disabled
            ? item.active
            : false,
        disabled: typeof item.disabled == 'boolean' ? item.disabled : false,
      }"
      :title="item.name"
      :key="item.id">
      <img
        style="margin-bottom: 5px"
        :src="
          typeof item.icon == 'object'
            ? item.active
              ? item.icon.active
              : item.icon.normal
            : item.icon
        "
        @click="clickItem(item)" />
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from "vue";
//工具栏配置项
const { config } = defineProps({
  /**
   * {
   *   //唯一标识符,用于识别工具栏钮
   *   id:string
   *   //按钮的功能名称,会显示在tooltip中
   *   name:string
   *   //按钮的图标,图标必须位于src\assets\icon路径下,且格式必须为png
   *   //如果希望按钮在激活和未激活时使用不同的图标,可以将icon设置为一个对象{normal:string未激活时的图标 active:string激活时的图标}
   *   icon:string|object
   *   //按钮是否激活,激活时按钮会变为青绿色,可以使用setToolControlConfigActive修改按钮的激活状态
   *   //一些按钮不存在激活概念时(例如复位按钮)则可以不设置该属性
   *   active?:boolean
   *    //按钮是否禁用，若为false按钮可以正常显示和使用，若为false则按钮会显示但无法点击
   *   disabled?:boolean
   * }
   */
  config: {
    type: Array,
    required: true,
  },
});

const emit = defineEmits(["clickItem"]);

function clickItem(item) {
  const { id, active, disabled } = item;
  if (disabled === true) return;
  emit("clickItem", item);
}
</script>

<style lang="less" scoped>
.toolbar {
  position: fixed;
  top: auto;
  bottom: 60px;
  left: 20px;
  right: auto;
  z-index: 2;
  user-select: none;

  &-button {
    display: block;
    box-sizing: border-box;
    width: 32px;
    height: 32px;

    background-color: rgba(63, 72, 84, 0.9);
    border-radius: 2px;
    margin-bottom: 10px;
    line-height: 32px;
    cursor: pointer;
    &:hover {
      background-color: #3385ff;
      box-shadow: none;
      border: none;
    }
    &.active {
      background-color: #3385ff;
    }
    &.disabled {
      background-color: rgba(63, 72, 84, 0.3);
      cursor: not-allowed;
    }

    img {
      scale: 0.8;
      height: 100%;
      width: 100%;
      text-align: center;
      line-height: 32px;
      &:hover {
        scale: 0.9;
      }
    }
  }
}
</style>
